<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #1a1a1a, #0a192f);
            color: #fff;
            min-height: 100vh;
        }

        .navbar {
            padding: 1rem 5%;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            position: fixed;
            width: 100%;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo img {
            height: 40px;
            margin-right: 10px;
        }

        .logo-text {
            color: #64ffda;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .navbar ul {
            display: flex;
            list-style: none;
        }

        .navbar ul li {
            margin-left: 2rem;
        }

        .navbar ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }

        .navbar ul li a:hover {
            color: #64ffda;
        }

        .main-container {
            display: flex;
            padding: 80px 5% 2rem;
            gap: 2rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        .playlist-section {
            flex: 0 0 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 1.5rem;
            height: calc(100vh - 100px);
            position: sticky;
            top: 80px;
        }

        .playlist {
            list-style: none;
            margin-top: 1rem;
            height: calc(100% - 40px);
            overflow-y: auto;
        }

        .playlist::-webkit-scrollbar {
            width: 5px;
        }

        .playlist::-webkit-scrollbar-thumb {
            background: rgba(100, 255, 218, 0.5);
            border-radius: 5px;
        }

        .playlist-item {
            padding: 1rem;
            margin-bottom: 0.8rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .playlist-item:hover {
            background: rgba(100, 255, 218, 0.1);
            transform: translateX(5px);
        }

        .playlist-item.active {
            background: rgba(100, 255, 218, 0.2);
            border-left: 3px solid #64ffda;
        }

        .player-section {
            flex: 1;
            display: grid;
            grid-template-rows: auto 1fr auto;
            gap: 2rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }

        .song-info {
            text-align: center;
        }

        .song-title {
            font-size: 2.5rem;
            color: #64ffda;
            margin-bottom: 0.5rem;
        }

        .song-artist {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
        }

        .visualization-area {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            min-height: 300px;
        }

        .album-art {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            animation: rotate 20s linear infinite;
            animation-play-state: paused;
        }

        .album-art.playing {
            animation-play-state: running;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .controls-section {
            padding: 2rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
        }

        .progress-container {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            cursor: pointer;
            margin-bottom: 1rem;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #64ffda, #88cfff);
            border-radius: 10px;
            position: relative;
        }

        .time-info {
            display: flex;
            justify-content: space-between;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 1.5rem;
        }

        .controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
        }

        .control-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .control-btn:hover {
            color: #64ffda;
            transform: scale(1.1);
        }

        .play-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(100, 255, 218, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
        }

        @media (max-width: 1024px) {
            .main-container {
                flex-direction: column;
            }

            .playlist-section {
                flex: none;
                height: auto;
                position: static;
            }

            .playlist {
                max-height: 300px;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <img src="https://cdn-icons-png.flaticon.com/512/4616/4616040.png" alt="AI助手Logo">
            <span class="logo-text">AI助手</span>
        </div>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/demo/player">音乐</a></li>
            <li><a href="/pricing">定价</a></li>
            <li><a href="/demo/login">登录</a></li>
        </ul>
    </nav>

    <div class="main-container">
        <div class="playlist-section">
            <h2>播放列表</h2>
            <ul class="playlist" id="playlist">
                <!-- 歌曲列表将通过 JavaScript 动态生成 -->
            </ul>
        </div>

        <div class="player-section">
            <div class="song-info">
                <h2 class="song-title" id="currentTitle"></h2>
                <p class="song-artist" id="currentArtist"></p>
            </div>

            <div class="visualization-area">
                <div class="album-art" id="albumArt"></div>
            </div>

            <div class="controls-section">
                <div class="progress-container" id="progressContainer">
                    <div class="progress-bar" id="progressBar"></div>
                </div>
                <div class="time-info">
                    <span id="currentTime">0:00</span>
                    <span id="totalTime">0:00</span>
                </div>
                <div class="controls">
                    <button class="control-btn" id="prevBtn"><i class="fas fa-step-backward"></i></button>
                    <button class="control-btn" id="rewind15Btn"><i class="fas fa-backward"></i></button>
                    <button class="control-btn play-btn" id="playBtn"><i class="fas fa-play"></i></button>
                    <button class="control-btn" id="forward30Btn"><i class="fas fa-forward"></i></button>
                    <button class="control-btn" id="nextBtn"><i class="fas fa-step-forward"></i></button>
                </div>
            </div>
        </div>
    </div>

    <audio id="audioPlayer"></audio>

    <script>
        const playlist = [
            {
                title: "Counting Stars",
                artist: "OneRepublic",
                url: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Tours/Enthusiast/Tours_-_01_-_Enthusiast.mp3",
                albumArt: "https://i.scdn.co/image/ab67616d0000b273f7da7c6d1c21e1c52e5c3b89"
            },
            {
                title: "Shape of You",
                artist: "Ed Sheeran",
                url: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Kai_Engel/Irsens_Tale/Kai_Engel_-_04_-_Moonlight_Reprise.mp3",
                albumArt: "https://i.scdn.co/image/ab67616d0000b273ba5db46f4b838ef6027e6f96"
            },
            {
                title: "Blinding Lights",
                artist: "The Weeknd",
                url: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Chad_Crouch/Arps/Chad_Crouch_-_Shipping_Lanes.mp3",
                albumArt: "https://i.scdn.co/image/ab67616d0000b2738863bc11d2aa12b54f5aeb36"
            }
        ];

        let currentTrackIndex = 0;
        const audio = document.getElementById('audioPlayer');
        const playBtn = document.getElementById('playBtn');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const rewind15Btn = document.getElementById('rewind15Btn');
        const forward30Btn = document.getElementById('forward30Btn');
        const progressBar = document.getElementById('progressBar');
        const progressContainer = document.getElementById('progressContainer');
        const currentTimeSpan = document.getElementById('currentTime');
        const totalTimeSpan = document.getElementById('totalTime');
        const playlistElement = document.getElementById('playlist');
        const currentTitle = document.getElementById('currentTitle');
        const currentArtist = document.getElementById('currentArtist');
        const albumArt = document.getElementById('albumArt');

        function initializePlaylist() {
            playlist.forEach((track, index) => {
                const li = document.createElement('li');
                li.className = `playlist-item ${index === 0 ? 'active' : ''}`;
                li.innerHTML = `
                    <div class="song-title">${track.title}</div>
                    <div class="song-artist">${track.artist}</div>
                `;
                li.addEventListener('click', () => {
                    currentTrackIndex = index;
                    loadAndPlayTrack();
                });
                playlistElement.appendChild(li);
            });
            loadTrack();
        }

        function loadTrack() {
            const track = playlist[currentTrackIndex];
            audio.src = track.url;
            currentTitle.textContent = track.title;
            currentArtist.textContent = track.artist;
            albumArt.style.backgroundImage = `url('${track.albumArt}')`;
            updatePlaylistActiveItem();
        }

        function loadAndPlayTrack() {
            loadTrack();
            audio.play();
            playBtn.innerHTML = '<i class="fas fa-pause"></i>';
            albumArt.classList.add('playing');
        }

        function updatePlaylistActiveItem() {
            document.querySelectorAll('.playlist-item').forEach((item, index) => {
                item.classList.toggle('active', index === currentTrackIndex);
            });
        }

        playBtn.addEventListener('click', () => {
            if (audio.paused) {
                audio.play();
                playBtn.innerHTML = '<i class="fas fa-pause"></i>';
                albumArt.classList.add('playing');
            } else {
                audio.pause();
                playBtn.innerHTML = '<i class="fas fa-play"></i>';
                albumArt.classList.remove('playing');
            }
        });

        prevBtn.addEventListener('click', () => {
            currentTrackIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
            loadAndPlayTrack();
        });

        nextBtn.addEventListener('click', () => {
            currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
            loadAndPlayTrack();
        });

        rewind15Btn.addEventListener('click', () => {
            audio.currentTime = Math.max(0, audio.currentTime - 15);
        });

        forward30Btn.addEventListener('click', () => {
            audio.currentTime = Math.min(audio.duration, audio.currentTime + 30);
        });

        progressContainer.addEventListener('click', (e) => {
            const width = progressContainer.clientWidth;
            const clickX = e.offsetX;
            const duration = audio.duration;
            audio.currentTime = (clickX / width) * duration;
        });

        audio.addEventListener('timeupdate', () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            progressBar.style.width = `${progress}%`;
            currentTimeSpan.textContent = formatTime(audio.currentTime);
        });

        audio.addEventListener('loadedmetadata', () => {
            totalTimeSpan.textContent = formatTime(audio.duration);
        });

        audio.addEventListener('ended', () => {
            currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
            loadAndPlayTrack();
        });

        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.floor(seconds % 60);
            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
        }

        initializePlaylist();
    </script>
</body>
</html>
